<template>
  <div class="bg">
    <q-carousel
        :keep-alive="true"
        animated
        v-model="slide"
        infinite
        :vertical="true"
        transition-prev="slide-right"
        transition-next="slide-left"
        height="280px"
    >
      <q-carousel-slide :name="n" v-for="n in content.length" :key="n">
        <div class="content">
          <div class="person">
            <div class="avatar">
              <q-img src="@/assets/images/avatar.webp" fit="fill">
              </q-img>
            </div>
            <div class="introduction">
              <span class="text text-name">John Forest</span>
              <span class="text">Customer</span>
            </div>
          </div>
          <div class="evaluate">
            <p>{{content[n-1]}}</p>
          </div>
        </div>
      </q-carousel-slide>
    </q-carousel>
    <aplusmax-select :count="content.length" :active="slide" :prev="prve" :next="next" :slide_position="slide_position"></aplusmax-select>
  </div>
</template>

<script setup lang='ts'>
import {defineProps, defineEmits, defineExpose, ref, reactive} from 'vue'

defineProps({})

const emit = defineEmits([])

defineExpose({})


const slide = ref(1)

const content = reactive([
  "What i love about this shop is the fact that they have great assistance after buying. They offer free recipes and a lot of freebies on each purchase.",
  "What i love about this shop is the fact that they have great assistance after buying. They offer free recipes and a lot of freebies on each purchase.",
  "What i love about this shop is the fact that they have great assistance after buying. They offer free recipes and a lot of freebies on each purchase.",
  "What i love about this shop is the fact that they have great assistance after buying. They offer free recipes and a lot of freebies on each purchase.",
  "What i love about this shop is the fact that they have great assistance after buying. They offer free recipes and a lot of freebies on each purchase.",
])

const prve = () => {
  if (slide.value > 1){
    slide.value -= 1
  }
}

const next = () => {
  if (slide.value < content.length) {
    slide.value += 1
  }
}

const slide_position = (position) => {
  if (Array.from({ length: content.length }, (_, index) => index+1).includes(position)){
    slide.value = position
  }
}
</script>

<style scoped lang='less'>

.bg{
  background-color: #ebebe5;
  border-radius: 10px;
  padding: 80px 50px;
  ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  ::-webkit-scrollbar-thumb {
    background: #888;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
}
.q-carousel__slide{
  background-color: #ebebe5;
}
:deep(.q-panel){
  background-color: #ebebe5;
}
.content{
  width: 100%;
  height: 100%;
  padding: 0 20%;
}
.person{
  justify-content: center;
  width: 100%;
  display: flex;
  gap: 20px;
  align-items: center;
  .avatar{
    border-radius: 50%;
    overflow: hidden;
    width: 4.375rem;
    background: rgba(0, 0, 0, .06);
  }
  .introduction{
    width: auto;
    .text-name{
      font-size: 20px;
      font-weight: 800;
    }
    .text{
      display: block;
      clear: both;
    }
  }
}
.evaluate{
  font-size: 25px;
  padding-top: 50px;
}

</style>